<template>
  <div class="container">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <div
          class="bannerimg"
          :style="`
          background:url(${item.url}) center center no-repeat
          background-size: contain contain;
        `"
        ></div>
      </el-carousel-item>
    </el-carousel>
    <div class="search">
      <el-input v-model="search_input" placeholder="请输入你要搜索的关键字"></el-input>
      <div class="s_button" @click="searchkey">搜索</div>
    </div>
    <div style="width:1100px;margin:20px auto;">
      <div class="box" @click="search(item)" :class="{active:item==cur_type}" v-for="(item,index) in list" :key="index">{{item}}</div>
      <div style="clear:both;"></div>
      <div id="gonglve">
        <ul class="yjList">
          <li  @click="handleArtcile(item,index)" class="clearfix" v-for="(item,index) in artlist" :key="index">
            <div class="yjListLeft">
              <img
                data-id="1121673"
                :src="item.article.headerimgurl"
                data-original-background="none"
                style="background: none;"
              />
              <!-- <span class="jingpin">精品</span> -->
            </div>
            <div class="yjListRight">
              <p
               
                class="yjTitle"
                data-id="1121673"
              >{{item.article.title}}</p>
              <p
                class="yjInfo"
                data-id="1121673"
              >{{item.article.intro}}...</p>
            </div>
            <div class="yjBottom">
              <div class="leftUserPic">
                <img :src="'http://localhost:8010/getImage?name='+item.user.avataurl" />
                <div class="username">&ensp;{{item.user.nickname}}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cur_type:"",
      search_input:"",
      list: [
        "湖泊风景区",
        "山岳风景区",
        "森林风景区",
        "山水风景区",
        "海滨风景区",
        "休闲疗养避暑胜地",
        "宗教寺庙名胜区",
        "革命纪念地"
      ],
      artlist: [],
      banners: [
        { url: "http://localhost:8010/getImage?name=th01.jfif" },
        { url: "http://localhost:8010/getImage?name=th02.jfif" },
        { url: "http://localhost:8010/getImage?name=th03.jfif" },
        { url: "http://localhost:8010/getImage?name=th04.jfif" }
      ]
    };
  },
  methods: {
    search(i) {
      this.cur_type = i
      this.$axios.get("api2/article/typelist?name=" + i).then(res => {
        this.artlist = res.data.list;
      });
    },
    handleArtcile(item, index) {
      window.console.log(item);
      this.$store.commit("commons/setArticleId", item.article.id);
      this.$router.push("/strategy/page");
    },
    searchkey(){
          this.$axios.get("api2/article/search?name=" + this.search_input).then(res => {
        this.artlist = res.data.list;
      });
    }
  },
  created() {
    this.$axios
      .get(
        "/api2/article/list/tuijian?start=" +
          0 +
          "&user_token=" +
          this.$store.state.user.userInfo.token
      )
      .then(res => {
        this.artlist = res.data.list;
      });
  }
};
</script>
<style>
/* @import url(../assets/css/home.css); */
</style>
<style lang="less" scoped>

/deep/.el-input__inner{
  border-radius: 50px;
  width: 500px;
  height: 50px;
}
/deep/.el-input{
  width: 500px;
}
.search{
  width: 700px;
  background: blanchedalmond;
  border-radius: 70px;
  margin: 20px auto;
  .s_button{
    background: royalblue;
    width: 120px;
    text-align: center;
    color: white;
    height: 46px;
    border-radius: 50px;
    line-height: 46px;
    float:right;
    margin-right: 20px;
    margin-top: 2px;
    &:hover{
      background: rgb(37, 70, 172);
      cursor:pointer;
    }
  }
}
.container {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;
  /deep/ .el-carousel__container {
    height: 850px;
  }
  .bannerimg {
    height: 100%;
    width: 100%;
  }
}
.box {
  border-radius: 50px;
  height: 50px;
  width: 200px;
  border: solid 1px darkcyan;
  text-align: center;
  line-height: 50px;
  color: darkcyan;
  margin: 20px;
  margin-left: 40px;
  float: left;
  &:hover {
    background: darkcyan;
    color: white;
    cursor: pointer;
  }
  &.active{
    background: darkcyan;
    color: white;
  }
}
#gonglve {
  .yjList {
    li {
      display: block;
      float: left;
      list-style-type: none;
      position: relative;
      background: rgb(236, 251, 252);
      border-radius: 20px;
      margin: 20px;
      height: 220px;
      padding: 5px;
      &:hover {
        cursor: pointer;
      }
      .yjListLeft {
        float: left;
        img {
          margin-top: 20px;
          height: 150px;
          width: 220px;
        }
      }
      .yjListRight {
        float: left;
        width: 220px;
        margin-left: 5px;

        .yjTitle {
          font-size: 15px;
          margin: 0;
          margin-top: 20px;
          font-weight: 800;
        }
        .yjInfo {
          font-size: 13px;
          color: rgb(102, 101, 101);
        }
      }
      .yjBottom {
        position: absolute;
        bottom: 10px;
        margin: 2px;
        border-radius: 20px;
        background: wheat;
        padding: 3px 10px;
        padding-bottom: 0px;
        .leftUserPic {
          img {
            height: 25px;
            width: 25px;
            display: inline-block;
            border-radius: 25px;
          }
          .username {
            height: 25px;
            line-height: 25px;
            font-size: 13px;
            display: inline-block;
            vertical-align: top;
          }
        }
      }
    }
  }
}
</style>